import ColorExample from "discourse/plugins/styleguide/discourse/components/color-example";
import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";

const Colors = <template>
  <StyleguideExample @title="primary">
    <section class="color-row">
      <ColorExample @color="primary-very-low" />
      <ColorExample @color="primary-low" />
      <ColorExample @color="primary-low-mid" />
    </section>
    <section class="color-row">
      <ColorExample @color="primary-medium" />
      <ColorExample @color="primary-high" />
      <ColorExample @color="primary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="primary-100">
    <section class="color-row">
      <ColorExample @color="primary-50" />
      <ColorExample @color="primary-100" />
      <ColorExample @color="primary-200" />
      <ColorExample @color="primary-300" />
      <ColorExample @color="primary-400" />
      <ColorExample @color="primary-500" />
    </section>
    <section class="color-row">
      <ColorExample @color="primary-600" />
      <ColorExample @color="primary-700" />
      <ColorExample @color="primary-800" />
      <ColorExample @color="primary-900" />
      <ColorExample @color="primary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="secondary">
    <section class="color-row">
      <ColorExample @color="secondary-low" />
      <ColorExample @color="secondary-medium" />
      <ColorExample @color="secondary-high" />
      <ColorExample @color="secondary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="tertiary">
    <section class="color-row">
      <ColorExample @color="tertiary-low" />
      <ColorExample @color="tertiary-medium" />
      <ColorExample @color="tertiary-high" />
      <ColorExample @color="tertiary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="tertiary-100">
    <section class="color-row">
      <ColorExample @color="tertiary-25" />
      <ColorExample @color="tertiary-50" />
      <ColorExample @color="tertiary-100" />
      <ColorExample @color="tertiary-200" />
      <ColorExample @color="tertiary-300" />
      <ColorExample @color="tertiary-400" />
    </section>
    <section class="color-row">
      <ColorExample @color="tertiary-500" />
      <ColorExample @color="tertiary-600" />
      <ColorExample @color="tertiary-700" />
      <ColorExample @color="tertiary-800" />
      <ColorExample @color="tertiary-900" />
      <ColorExample @color="tertiary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="quaternary">
    <section class="color-row">
      <ColorExample @color="quaternary-low" />
      <ColorExample @color="quaternary" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="highlight">
    <section class="color-row">
      <ColorExample @color="highlight-bg" />
      <ColorExample @color="highlight" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="danger">
    <section class="color-row">
      <ColorExample @color="danger-low" />
      <ColorExample @color="danger-low-mid" />
      <ColorExample @color="danger-medium" />
      <ColorExample @color="danger" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="success">
    <section class="color-row">
      <ColorExample @color="success-low" />
      <ColorExample @color="success-medium" />
      <ColorExample @color="success" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="love">
    <section class="color-row">
      <ColorExample @color="love-low" />
      <ColorExample @color="love" />
    </section>
  </StyleguideExample>

  <StyleguideExample @title="header_primary">
    <section class="color-row">
      <ColorExample @color="header_background" />
    </section>
    <section class="color-row">
      <ColorExample @color="header_primary" />
      <ColorExample @color="header_primary-very-high" />
      <ColorExample @color="header_primary-high" />
    </section>
    <section class="color-row">
      <ColorExample @color="header_primary-medium" />
      <ColorExample @color="header_primary-low-mid" />
      <ColorExample @color="header_primary-low" />
    </section>
  </StyleguideExample>
</template>;

export default Colors;
